<template>
	<view class="user">
		<image class="user-header-image" mode="widthFix" :src="user_banner"></image>
		<view class="user-info-box" v-if="user">
			<image class="mr12" :src="user.avatar" style="width:96rpx;height:96rpx;border-radius:50%;"></image>
			<view class="d-flex flex-column">
				<text class="font-bold font-16 mb12">{{ user.name }}</text>
				<text class="font-12 color-gray">{{ user.phone || '未设置' }}</text>
			</view>
		</view>
		<view class="user-info-box" @click="login" v-else>
			<image class="mr12" :src="avatar" style="width:96rpx;height:96rpx;border-radius:50%;"></image>
			<view class="d-flex flex-column">
				<text class="font-bold font-16 mb12">未登录</text>
				<text class="font-12 color-gray">点击登录</text>
			</view>
		</view>
		<view class="menu-box">
			<uv-list padding="25rpx">
				<uv-list-item
					v-for="(item, index) in menus"
					:key="index"
					border
					:clickable="true"
					@click="handleClick(item)"
					:thumb="item.thumb"
					:title="item.name"
					:show-arrow="item.showArrow"
					:right-text="item.rightText || ''"
				></uv-list-item>
			</uv-list>
		</view>
		<view class="btn-container" v-if="user"><uv-button type="primary" @click="logout()">退出登录</uv-button></view>
		<uv-popup ref="popup">
			<view class="title">北京耀峰未来科技有限公司</view>
			<view class="aboutus">
				<view class="p">
					北京耀峰未来科技有限公司主要从事智慧农业物联网领域的高新技术企业，专注研发灌溉电磁阀、电动球阀、阀门控制器、灌溉控制器、网关、信息化平台等软、硬件产品，提供可定制的“互联网+”和智慧水肥管理解决方案。公司拥有雄厚的科研开发能力，一流的技术服务团队，与中国农业大学、中国农业科学院、中国水利水电科学研究院、新疆农垦科学院等科研单位建立长期合作关系。
				</view>
				<view class="p">
					为适应现代农业的快速发展，公司将不断提升技术研发能力，运用前沿的物联网与人工智能技术，在物联网农业、智能传感器、大数据分析等农业应用领域方面不断取得突破，助推农业高质量发展，为国家智慧农业发展提供专业技术服务和高端优质产品。
				</view>
			</view>
		</uv-popup>
		<uv-popup ref="popupConcat">
			<view class="title">北京耀峰未来科技有限公司</view>
			<view class="aboutus">
				<view class="p" style="margin-bottom:12rpx">地址：北京市海淀区金码大厦A座1212室</view>
				<view class="p" @click="callPhone('13041234546')">电话：13041234546</view>
			</view>
		</uv-popup>
	</view>
</template>

<script>
import { modal, routeUrl, toast } from '@/util';
import { commandRaw } from '../../util/formatter';
import { mapGetters } from 'vuex';
export default {
	data() {
		return {
			version: '1.0.0',
			user_banner: '../../static/index-banner.jpg',
			avatar: '../../static/avatar.png',
			menus: [
				{ name: '关于我们', thumb: '../../static/icon/about.png', size: 24, showArrow: true },
				{ name: '联系我们', thumb: '../../static/icon/contact.png', size: 24, showArrow: true, phone: '13520946139' },
				{ auth: 1, name: '系统设置', thumb: '../../static/icon/set.png', size: 24, showArrow: true, url: '/pages/my/set' },
				{ name: '当前版本', thumb: '../../static/icon/version.png', size: 24, showArrow: true, rightText: '1.0.0' }
			]
		};
	},
	computed: {
		...mapGetters(['user'])
	},
	created() {
		uni.getSystemInfo({
			success: res => {
				this.version = res.appVersion;
			}
		});
	},
	methods: {
		handleClick(item) {
			if (item.auth && !this.user) {
				toast('请登录后进行此操作');
			} else {
				if (item.name === '关于我们') {
					this.$refs.popup.open('bottom');
				}
				if (item.url) {
					routeUrl(item.url);
				}
				if (item.phone) {
					this.$refs.popupConcat.open('bottom');
				}
			}
		},
		login() {
			routeUrl('/pages/index/login?url=/pages/tabbar/my');
		},
		logout() {
			modal('操作确认', '确定退出吗？', () => {
				setTimeout(() => {
					uni.removeStorageSync('name');
					uni.removeStorageSync('phone');
					uni.removeStorageSync('user');
					uni.removeStorageSync('avatar');
					uni.removeStorageSync('superable');

					uni.removeStorageSync('vue_admin_template_token');

					this.$store.commit('user/RESET_STATE');
					toast('操作成功');
				}, 300);
			});
		},
		callPhone(phone) {
			plus.device.dial(phone, false);
			var Intent = plus.android.importClass('android.content.Intent');
			var Uri = plus.android.importClass('android.net.Uri');
			// 获取主Activity对象的实例
			var main = plus.android.runtimeMainActivity();
			// 创建Intent
			var uri = Uri.parse('tel:' + phone); // 这里可修改电话号码
			var call = new Intent('android.intent.action.CALL', uri);
			// 调用startActivity方法拨打电话
			main.startActivity(call);
		}
	}
};
</script>
<style>
page {
	background: #f0f0f0;
}
</style>
<style lang="scss" scoped>

	.title{
		text-align:center;
		margin:36rpx 0 4rpx 0;
		font-weight: bold;
	}
.aboutus {
	padding: 25rpx;
	line-height: 1.8rem;
	.p {
		text-indent: 2rem;
		margin-bottom: 24rpx;
		font-size:30rpx;
	}
}
.btn-container {
	margin: 25rpx;
}
.menu-box {
	background: #fff;
	margin-top: 20rpx;
	width: 676rpx;
	margin: 25rpx;
	border-radius: 12rpx;
	padding: 0 12rpx;
}
.user {
	.user-header-image {
		width: 100%;
		opacity: 0.8;
	}
	.user-info-box {
		background: #ffffff;
		padding: 25rpx;
		margin: -108rpx 25rpx 20rpx 25rpx;
		position: relative;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		.user-avg {
			width: 100rpx;
			height: 100rpx;
			border-radius: 10rpx;
		}
		.user-nickname {
			margin-left: 20rpx;
		}
		.user-phone {
			margin-left: 20rpx;
			font-size: 24rpx;
			color: #666666;
		}
	}
}
</style>
